import React, {PureComponent} from 'react';
import {View, Text, FlatList, SafeAreaView, StyleSheet} from 'react-native';
import NavigationFactory from '../../utils/NavigationFactory';

@NavigationFactory
class Page5 extends PureComponent {
  state = {
    dataArr: [
      {id: 1, name: '北京'},
      {id: 2, name: '广州'},
      {id: 3, name: '东京'},
      {id: 4, name: '上海'},
      {id: 5, name: '深圳'},
      {id: 6, name: '新姜'},
      {id: 7, name: '香港'},
      {id: 8, name: '台湾'},
    ],
  };
  constructor(props) {
    super(props);
  }

  _renderItem(data) {
    return (
      <SafeAreaView>
        <View style={styles.listItem}>
          <Text style={styles.itemText}>
            {data.item.id}
            {data.item.name}
          </Text>
        </View>
      </SafeAreaView>
    );
  }
  _keyExtractor = (item, index) => item.id;
  render() {
    return (
      <View style={styles.contain}>
        {/*<FlatList*/}
        {/*  data={this.state.dataArr}*/}
        {/*  extraData={this.state} //this.state数据发生改变自动刷新*/}
        {/*  renderItem={data => this._renderItem(data)}*/}
        {/*  keyExtractor={this._keyExtractor} //指定key*/}
        {/*/>*/}
      </View>
    );
  }
}

var styles = StyleSheet.create({
  contain: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  listItem: {
    backgroundColor: '#998318',
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 150,
    marginTop: 10,
    marginBottom: 10,
  },
  itemText: {
    fontSize: 25,
    color: 'white',
    // justifyContent: 'center',
    // alignItems: 'center',
  },
});

export default Page5;
